import React from 'react'

const DeskBig = (props) => {
  const {deskJoin, data, index} = props
  const players = []
  for (let i = 0; i < 10; i++) {
    players.push({
      headUrl: 'img/groupNew/big-header.png'
    })
  }
  if (!data.isEmpty) {
    data.data.players.forEach((player, index) => {
      players[index] = player
    })
  }
  const deskNames = ['big-desk-1', 'big-desk-2', 'big-desk-3', 'big-desk-4', 'big-desk-5', 'big-desk-6', 'big-desk-7', 'big-desk-8', 'big-desk-9', 'big-desk-10']
  return <div onClick={deskJoin} className="vh-center column big-desk-wrapper">
    <img className="full-width" src="img/groupNew/big-desk.png" alt=""/>
    {/* <img className="big-size big-desk-1" src="img/groupNew/big-header.png" alt=""/>    
    <img className="big-size big-desk-2" src="img/groupNew/big-header.png" alt=""/>    
    <img className="big-size big-desk-3" src="img/groupNew/big-header.png" alt=""/>    
    <img className="big-size big-desk-4" src="img/groupNew/big-header.png" alt=""/> 
    <img className="big-size big-desk-5" src="img/groupNew/big-header.png" alt=""/>    
    <img className="big-size big-desk-6" src="img/groupNew/big-header.png" alt=""/>    
    <img className="big-size big-desk-7" src="img/groupNew/big-header.png" alt=""/>    
    <img className="big-size big-desk-8" src="img/groupNew/big-header.png" alt=""/> 
    <img className="big-size big-desk-9" src="img/groupNew/big-header.png" alt=""/> 
    <img className="big-size big-desk-10" src="img/groupNew/big-header.png" alt=""/>  */}
    {
      players.map((p, i) => {
        const cn = deskNames[i]
        if (data.isEmpty) {
          return <img key={i} className={cn} src="img/groupNew/big-header.png" alt=""/> 
        } else {
          return <img onClick={deskJoin} key={i} className={cn} src={p.headUrl} alt=""/>
        }
      })
    }
    {
      !data.isEmpty && data.data.start ? <span className="desk-tip">游戏中...</span> : null
    }
  </div>
}
export default DeskBig